<template>
  <div>
    <table-container v-bind="state.tableSchema">
      <template v-slot:id="scope">
        {{ +scope.row.id }}
      </template>
      <template v-slot:url="scope">
        <div class="img-box" w-40px h-40px v-if="scope.row.filename.search(/\.jpg$|\.png$/g) >= 0">
          <el-image :src="scope.row.url" fit="contain" preview-teleported :preview-src-list="[scope.row.url]" width="100%"></el-image>
        </div>
        <div v-else mr-1 line-clamp-1>
          <span @click="openUrl(scope.row.url)">{{ scope.row.url }} </span>
        </div>
      </template>
    </table-container>
  </div>
</template>

<script lang="ts" setup>
// import { Delete, Download, Plus, Refresh, Search, Upload } from '@element-plus/icons-vue';
import { TableDataTypeRow, TableSearchSchemaRowType } from 'types/table';
import { reactive } from 'vue';
let state = reactive<any>({})

const resetSearch = () => {
}

const search = () => {
  
}

const domr = ref()

state.formSchema = {
  url: '/common/files/delete',
  formActions: [
    { type: 'reset', title: '重置', icon: 'Refresh' },
    { type: 'submit', title: '提交', icon: 'Search' },
  ],
  fields: [
    
  ]
}
state.tableSchema = {
  url: '/common/files/list',
  // 自定义配置
  config: {
    loading: true,
  },
  //自定义查询参数
  params: {  }, 
  fields: [
    { type: 'index', field: '', label: '序号', width: 50 },
    { field: 'id', label: '编号' },
    { field: 'originalname', label: '初始文件名', showOverflowTooltip: true },
    { field: 'url', label: '链接', showOverflowTooltip: true },
    { field: 'create_time', label: '时间' },
  ] as TableDataTypeRow[],
  tableRowActions: [{type: 'delete',style: '', label: '删除'}],
  searchFormSchema: [
    { field: 'title', type: 'input', label: '标题', width: 40 },
    { field: 'createTime', type: 'date', label: '链题标接' },
  ] as TableSearchSchemaRowType[],
  searchActions: [
    { type: 'reset', label: '重置', style: 'primary', icon: 'Refresh' },
    { type: 'search', label: '搜索', style: 'primary', icon: 'Search' },
  ],
  tableActions: [
    { type: 'import', label: '导入', style: '', icon: 'Upload' },
    { type: 'export', label: '导出', style: '', icon: 'Download' },
    { type: 'add', label: '新增', style: 'primary', icon: 'Plus' },
    { type: 'delete', label: '删除', style: 'danger', icon: 'Delete' }
  ],

  uploadOptions: {
    limit: 1,
    accept: '.jpg,.png,.pdf',
    headers: {}
  }
}

const openUrl = (url: string) => {
  const el = document.createElement('a')
  
  window.open(url,'_blank')
}



</script>


<style lang="scss" scoped></style>